<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="no-referrer" />
    <title>后台管理系统</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4798413_39ijptpf6we.css"
    />
    <link rel="stylesheet" href="../style/common.css" />
    <style>
      main .list .item {
        height: 100px;
        padding: 5px 0;
        user-select: none;
      }

      main .list .item .text:nth-child(1) {
        width: 11%;
      }

      main .list .item .text:nth-child(2) {
        width: 11%;
      }

      main .list .item .text:nth-child(3) {
        width: 11%;
      }

      main .list .item .text:nth-child(4) {
        width: 11%;
      }

      main .list .item .text:nth-child(5) {
        width: 11%;
      }

      main .list .item .text:nth-child(6) {
        width: 30%;
      }

      main .list .item .img {
        width: 100px;
        height: 80px;
      }
    </style>
  </head>

  <body>
    <header class="bg-base flex aic pl-20 jc-sb">
     
      <h3 class="fff">果莱人才网后台管理系统</h3>
      <div>
        <span class="fcc fff mr-30 logined">
          <span id="username" class="ml-5"></span>
          <span class="fff f14 ml-5 cursor" id="logout"> 退出登录</span>
        </span>
        <a href="../index.html" class="fcc fff mr-30 cursor">去登录</a>
      </div>
    </header>

    <aside>
      <dl class="bg-fff list">
        <!-- <a class="cursor flex aic active" href="../tuijian/list.html">
                <i class="iconfont ml-30 icon-tuijian"></i>
                <span class="ml-5">推荐</span>
            </a>
            <a class="cursor flex aic" href="../hourse/house.html">
                <i class="iconfont ml-30 icon-fangzi"></i>
                <span class="ml-5">房子</span>
            </a>
            <a class="cursor flex aic" href="../zuji/zuji.html">
                <i class="iconfont ml-30 icon-zuji"></i>
                <span class="ml-5">足迹</span>
            </a> -->
      </dl>
    </aside>

    <main class="bg-fff" style="min-width: 800px">
      <div class="pl-30 mb-20 flex jc-sb pr-30">
        <span>企业列表</span>
        <a href="./search.html"><span class="base cursor">查找</span></a>
        <a href="./add.html" class="base cursor">添加</a>
      </div>
      <ul class="list" id="list" style="min-width: 600px">
        <li class="item aic flex">
          <span class="text fcc">编号</span>
          <span class="text fcc">标题</span>
          <span class="text fcc">职位类型</span>
          <span class="text fcc">需招人数</span>
          <span class="text fcc">公司名</span>
          <span class="text fcc">图片</span>
          <p class="text fg1 fcc">操作</p>
        </li>

        <!-- <li class="item aic flex">
                <span class="fcc text">编号</span>
                <span class="fcc text">标题</span>
                <span class="fcc text">分类</span>
                <span class="fcc text">分类名称</span>
                <p class="fcc text"><img class="img"
                        src="https://img2.baidu.com/it/u=1337068678,3064275007&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=500&amp;h=750">
                </p>
                <p class="fcc text fg1">
                    <button class="del">删除</button>
                    <button class="submit ml-5"><a class="fff" href="#">编辑</a></button>
                </p>
            </li> -->
      </ul>
    </main>

    <script src="../js/jquery.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/common.js"></script>

    <script>
    
  
      var positionObj = {
        // 获取列表数据
        getList() {
          var url = "http://localhost:3000/enterprise";
          axios.get(url).then(function (res) {
            console.log(res);
            positionObj.render(res.data);
          });
        },

        // 绑定事件
        bindEvents() {
          // 因为列表是后面添加的, 所以使用时间托管
          $("#list").on("click", ".del", function () {
            // this是指向了点击的按钮, $(this)把它变成jq对象
            var id = $(this).attr("id");
            var $li = $(this).closest('li');
            positionObj.del(id,$li);
          });
        },

        // 删除数据
        del(id,$li) {
          var url = "http://localhost:3000/enterprise/" + id;
          axios.delete(url).then(function (res) {
            $li.remove();
            alert("删除成功");
          });
        },

        render(list) {
          var htmlStr = "";
          list.forEach(function (item) {
            // item就是每一个成员对象,index是成员的下标
            htmlStr += `
                    <li class="item aic flex">
                 <span class="fcc text">${item.id}</span>
                <span class="fcc text">${item.hotMove}</span>
                <span class="fcc text">${item.workType}</span>
                <span class="fcc text">${item.peopleNum}</span>
                <span class="fcc text">${item.companyName}</span>
               
                <p class="fcc text"><img class="img"
                        src="${item.imgUrl}">
                </p>
                <p class="fcc text fg1">
                    <button id="${item.id}" class="del">删除</button>
                    <button class="submit ml-5"><a class="fff" href="./edit.html?id=${item.id}">编辑</a></button>
                </p>
            </li> 
                    `;
          });
          $("#list").append(htmlStr);
        },
      };

      positionObj.getList();
      positionObj.bindEvents();
    </script>
  </body>
</html>
